<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>用户管理</span>
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span>{{isAdd?'添加用户':'修改用户'}}</span>
    </div>
    <form class="form-horizontal" id="" @submit.prevent="submit">
      <div class="form-group">
          <label for="inputtext" class="col-sm-2 control-label col-sm-offset-3">用户ID：</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="inputtext" name="remoteip" value="" placeholder="用户ID" v-model="userModel.userid" v-bind:disabled="!isAdd">
            <button type="button" class="btn btn-default btn-lg yhgl-btn-one" @click="checkUserId" v-if="isAdd">验证用户ID</button>
          </div>
      </div>
      <div class="form-group">
        <label for="inputtext1" class="col-sm-2 control-label col-sm-offset-3">用户姓名：</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="inputtext1" name="remoteip" value="" placeholder="用户姓名" v-model="userModel.username">
          </div>
      </div>
      <div class="form-group">
        <label for="inputpassword" class="col-sm-2 control-label col-sm-offset-3">密码：</label>
          <div class="col-sm-5">
            <input type="password" class="form-control" id="inputpassword" name="remoteip" value="" placeholder="" v-model="userModel.pwd" v-bind:disabled="!isAdd">
            <button type="button" class="btn btn-default btn-lg yhgl-btn-one" v-if="!isAdd" @click="resetPwd">重置密码</button>
          </div>
      </div>
      <div class="form-group" v-if="isAdd">
        <label for="inputpassword2" class="col-sm-2 control-label col-sm-offset-3">确认密码：</label>
          <div class="col-sm-5">
            <input type="password" class="form-control" id="inputpassword2" name="remoteip" value="" placeholder="" v-model="repwd">
          </div>
      </div>
      <div class="form-group">
        <label for="inputnumber1" class="col-sm-2 control-label col-sm-offset-3">固定电话：</label>
          <div class="col-sm-5">
            <input type="number" class="form-control" id="inputnumber1" name="remoteip" value="" placeholder="" v-model="userModel.mobile">
          </div>
      </div>
      <div class="form-group">
        <label for="inputnumber2" class="col-sm-2 control-label col-sm-offset-3">手机：</label>
          <div class="col-sm-5">
            <input type="number" class="form-control" id="inputnumber2" name="remoteip" value="" placeholder="" v-model="userModel.telephone">
          </div>
      </div>
      <div class="form-group">
        <label for="inputtext2" class="col-sm-2 control-label col-sm-offset-3">电子邮箱：</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="inputtext2" name="remoteip" value="" placeholder="" v-model="userModel.email">
          </div>
      </div>
      <div class="form-group">
          <label for="inputnumber2" class="col-sm-2 control-label col-sm-offset-3">角色名：</label>
          <div class="col-sm-5 ">
            <div class="yhgl-tab-one">
              <table class="table table-bordered jsgl-tab-one-tab" id="tblDevice">
                <tbody> 
                  <tr v-for="item in roleList">
                    <td width="5%"><input type="checkbox" v-model="selRoleIds" :value="item.roleid"></td>
                    <td width="20%" class="list-one">{{item.rolename}}</td>
                    <td width="20%" class="list-one">{{item.roleid}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
      </div>
      <p class="lx_btn">
        <button type="submit" class="btn btn-default btn-lg">保存</button>
        <button type="button" onclick="window.history.go(-1)" class="btn btn-default btn-lg">返回</button>
      </p>
    </form>   
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'AddUser',
    data: function () {
      return {
        userId: this.$route.params.userId,
        method: this.$route.params.method || 'add',
        userModel: {  // 用户模型
          username: '',
          userid: '',
          pwd: '',
          telephone: '',
          mobile: '',
          email: '',
          array: [
            { roleid: '' }
          ]
        },
        repwd: '',
        checkUser: false, // 标记 验证用户id是否通过
        roleList: [],   // 所有角色
        selRoleIds: []   // 选中角色id
      }
    },
    created: function () {
      if (!this.isAdd) {
        this.editInit()
      }
      this.privilegeInit()
    },
    computed: {
      isAdd: function () {
        return this.method === 'add'
      },
      selArray: function () {   // 已选数据
        var selArray = []
        for (var i in this.selRoleIds) {
          var item = this.selRoleIds[i]
          var selObj = this.roleList.find(function (o) {
            return o.roleid === item
          })
          if (selObj) {
            selArray.push({
              roleid: selObj.roleid
            })
          }
        }
        return selArray
      }
    },
    methods: {
      submit: function () {
        if (this.isAdd && !this.checkUser) {
          window.duang.msg('warning', '请先验证用户ID通过再保存')
          return
        }
        var data = {
          method: 'AddUser',
          array: this.selArray
        }
        data = window.$.extend(true, data, this.userModel)
        if (!this.isAdd) {
          data.method = 'UpdateUser'
        }
        this.$http.post('/api/hedacmdreq', data).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            window.duang.msg(true, body.retMsg)
          }
        })
      },
      checkUserId: function () {
        this.$http.post('/api/hedacmdreq', {method: 'CheckUserID', userid: this.userModel.userid}).then(response => {
          var body = response.data.HedaACK.Body
          this.checkUser = body.retCode === '0'
          if (this.checkUser) {
            window.duang.msg(true, body.retMsg)
          }
        })
      },
      resetPwd: function () {
        this.$http.post('/api/hedacmdreq', {method: 'ResetUserPwd', userid: this.userModel.userid}).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            window.duang.msg(true, body.retMsg)
          }
        })
      },
      editInit: function () {
        var $this = this
        // 获取用户详细信息
        this.$http.post('/api/hedacmdreq', {method: 'UserSearch', userid: this.userId}).then(response => {
          var body = response.data.HedaACK.Body
          this.userModel = {  // 用户模型
            username: body.username,
            userid: body.userid,
            pwd: body.pwd,
            telephone: body.telephone,
            mobile: body.mobile,
            email: body.email
          }
          this.userModel.pwd = '4a9ce0b18a20052f32065d5128c56f42'
        })
        // 以下都是为了默认选中角色名称
        function getRolePrivilege () {
          return $this.$http.post('/api/hedacmdreq', {method: 'UserRole', userid: $this.userId})
        }
        function getPrivilegeList () {
          return $this.privilegelist
        }
        // 统一请求，处理，必须要等2个请求全完成才能开始处理该数据
        axios.all([getRolePrivilege(), getPrivilegeList()]).then(axios.spread((myRes, res) => {
          var myList = myRes.data.HedaACK.Body.rolelist
          for (var i in myList) {
            var item = myList[i]
            this.selRoleIds.push(item.roleid)
          }
        }))
      },
      privilegeInit: function () {  // 所有权限初始化
        this.$http.post('/api/hedacmdreq', {method: 'GetRole', role: ''}).then(response => {
          var body = response.data.HedaACK.Body
          this.roleList = body.rolelist || []
        })
      }
    }
  }
</script>
